<template>
  <div class="typingGame-container forbiddenText">
    <div class="getWords" ref="display">
      <div
        class="move"
        v-for="item in currentWordsPage"
        :key="item.word.id"
        ref="move"
      >
        <div
          :id="'word-' + item.word.id"
          class="movex"
          :style="{ top: item.wordMoveY + 'px', left: item.WordsMoveX + 'px' }"
          ref="displays"
        >
          {{ item.word.english }}
        </div>
      </div>
      <div class="fraction-container">
        <div class="score">得分:{{ score }}</div>
        <div class="time">时间:{{ countdown }}</div>
        <div class="correct">正确率:{{ correct }}%</div>
      </div>
      <div class="input">
        <input
          type="text"
          class="enter-text"
          @keydown.enter="know"
          ref="screen"
          v-model="inputText"
          :style="{color: textColor }"
          v-focus
        />
      </div>
      <div class="tips">敲击回车按钮提交输入框的内容</div>
    </div>
    <div class="hide" v-if="show">
      <h1 class="font">讯飞杯第二届打字游戏比赛</h1>
      <div class="game">
        <button @click="play">
          <span class="game-start">开始游戏</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { getWordsAPI } from '@/api/WordsAPI'
import { getScoreTimeAPI } from '@/api/ScoreTimeAPI'
import move from 'move-js'
import { set } from 'vue'
import { getRankAPI } from '@/api/RankAPI'
export default {
  data() {
    return {
      show: true,
      // 从后端拿到的单词数据
      wordsList: [],
      // 要push出去的某个单词
      currentWordsPage: [],
      // 控制随机移动坐标
      WordsMoveX: '',
      // 控制页面是什么级的元素
      display: false,
      // 得分
      score: 0,
      // 正确率
      correct: 0,
      // 错误的总数
      errors: 0,
      // 正确的单词个数
      count: 0,
      // 分钟
      mintues: 10,
      // 秒数
      second: 4,
      // 全部时间秒数 这个来控制游戏的总时长
      totalsecond: 604,
      // 展示定时器开始前的内容
      countdown: '10:04',
      // 出现单词的计时器
      timers: null,
      // 开启动画的定时器
      timerY: null,
      // 倒计时定时器
      timer: null,
      inputText: '',
      textColor: 'black'
    }
  },
  watch: {
    // 监听变化输入框的变化
    inputText: {
      handler(value) {
        this.checkInputText(value)
      },
      deep: true,
      immediate: true
    }
  },
  // created() {
  //   this.$nextTick(() => {
  //     // 3.禁止键盘F12键
  //     document.addEventListener('keydown', function(e) {
  //       if (e.key === 'F12') {
  //         e.preventDefault() // 如果按下键F12,阻止事件
  //       }
  //     })
  //   })
  // },
  methods: {
    // 当用户在输入框中输入任意一个能匹配到数组中对象单词的子符时，输入框的颜色会变为黑色，否则会变为红色。
    checkInputText(value) {
      if (this.currentWordsPage.some(word => word.word.english.includes(value))) {
        this.textColor = 'black'
      } else {
        this.textColor = 'red'
      }
    },
    async play() {
      // 判断本地保存的状态 不是空就证明已经比赛过了 清除掉定时器 提示用户并且跳转到排名页
      if (localStorage.getItem('status') !== null) {
        clearInterval(this.timer)
        clearInterval(this.timers)
        clearInterval(this.timerY)
        this.$message({
          showClose: true,
          message: '你已经参加过比赛了',
          type: 'error'
        })
        this.$router.replace('/rank')
      }
      this.show = false
      // 点击开始游戏之后向后端发请求拿到 单词数组
      const { data: res } = await getWordsAPI()
      this.wordsList = res.data
      // 点击开始倒计时
      this.countDown()
      // 开启计时器
      this.timers = setInterval(() => {
        // 拿到wordsList的对象下标
        const index = Math.round(Math.random() * this.wordsList.length)
        const wordindex = {
          word: this.wordsList[index],
          color: 'black'
        }
        // 计算随机单词的坐标
        const moveX = Math.floor(Math.random() * (1150 - 50)) + 50
        wordindex.WordsMoveX = moveX
        wordindex.wordMoveY = 0
        this.currentWordsPage.push(wordindex)
        // 执行下降动画
        this.downSpeed(wordindex.word.id)
      }, 4000)
      this.$refs.display.style.display = 'block'
    },
    // 下降动画
    downSpeed(wid) {
      this.timerY = setTimeout(() => {
        // 拿到每个单词的id
        move('#word-' + wid)
          // 下降时长
          .duration('19.6s')
          // 下降到 615px的位置
          .y(615)
          .end(() => {
            this.currentWordsPage.shift()
          })
      }, 400)
    },
    // 在input框按下enter键后
    know() {
      for (const i in this.currentWordsPage) {
        // this.currentWordsPage[i]是数组中得某个单词 等于我inpput框中得值
        if (this.currentWordsPage[i].word.english === this.$refs.screen.value) {
          // 对一个单词加10分
          this.score += 10
          // 正确得单词数加1
          this.count++
          // 计算正确率
          this.correct = Math.round(
            (this.count / (this.errors + this.count)) * 100
          )
          // 答对了 input框为清除input框内容
          this.$refs.screen.value = ''
          this.inputText = ''
          // 并从arr 的 下标位置删除一个
          this.currentWordsPage.splice(i, 1)
          return
        }
      }
      // 当input框值按下enter键不为空时
      if (this.$refs.screen.value !== '') {
        // 那么错误的单词 加1
        this.errors++
        // 并计算正确率
        this.correct = Math.floor(
          (this.count / (this.errors + this.count)) * 100
        )
      }
    },
    // 倒计时模块
    countDown() {
      this.timer = setInterval(async() => {
        if (this.totalsecond > 0) {
          this.totalsecond--
          this.second--
          this.second = this.second === -1 ? (this.second = 59) : this.second
          this.mintues = this.second === 59 ? this.mintues - 1 : this.mintues
          this.mintues = Math.floor(this.mintues)
          this.second = Math.floor(this.second)
        } else {
          // 当倒计时结束时 清除掉多余的定时器 并向后端发送数据
          clearInterval(this.timer)
          clearInterval(this.timers)
          clearInterval(this.timerY)
          const { data: res } = await getScoreTimeAPI(
            this.score,
            this.correct,
            localStorage.getItem('mobilePhone')
          )
          localStorage.setItem('status', 200)
          if (res.code === 0) {
            // 跳转到 排名页
            this.$router.replace('/rank')
          } else {
            this.$message({
              showClose: true,
              message: '获取数据异常',
              type: 'error'
            })
            return
          }
        }
        this.mintues = this.mintues <= 9 ? this.mintues : this.mintues
        this.second = this.second <= 9 ? '0' + this.second : this.second
        this.countdown = this.mintues + ':' + this.second
      }, 1000)
    }
  },
  directives: {
    focus: {
      bind(el) {
        el.focus()
      },
      update(el) {
        el.focus()
      }
    }
  },
  components: {}
}
</script>
<style lang="less" scoped>
.forbiddenText {
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.fraction-container {
  position: absolute;
  bottom: 3vh;
  left: 2vw;
  width: 400px;
  height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(255, 123, 0),
    rgb(246, 255, 0),
    rgb(89, 255, 0),
    rgb(0, 251, 255),
    rgb(0, 51, 255)
  );
  z-index: 100;
  display: flex;
  justify-content: space-around;
  .score,
  .time,
  .correct {
    line-height: 30px;
    font-size: 14px;
  }
}
.typingGame-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url(../assets/game1.jpg);
  background-size: 100% 100%;
  justify-content: space-around;
  align-items: center;
  text-shadow: 0px 2px 4px grey;
}
.getWords {
  width: 100%;
  height: 100%;
  background-image: url(../assets/3529082.jpg);
  background-size: 100% 100%;
  display: none;
  position: relative;
}
.move {
  position: absolute;
  display: inline-block;
}
.movex {
  position: relative;
  width: 100%;
  height: 100%;
  // height: 30px;
  font-size: 24px;
  color: white;
}
.input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.enter-text {
  width: 33vw;
  height: 30px;
  border-radius: 10px;
  position: absolute;
  position: absolute;
  left: 35vw;
  bottom: 3vh;
  z-index: 100;
  font-size: 20px;
}
.hide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
.font {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-shadow: 0px 1px 0px skyblue, 0px 2px 0px skyblue, 0px 3px 0px skyblue,
    0px 4px 0px skyblue, 0px 5px 10px rgba(0, 0, 0, 0.9);
  width: 550px;
  height: 75px;
  line-height: 75px;
  margin: auto;
  position: relative;
  margin-bottom: 35px;
}
.font::before,
.font::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  animation: font 1500ms infinite linear;
}

.font::before {
  top: -10px;
  left: -10px;
  border-top: 5px solid #ffffff;
  border-left: 5px solid blue;
}

.font::after {
  right: -10px;
  bottom: -10px;
  border-bottom: 5px solid #0d45be;
  border-right: 5px solid;
}

@keyframes font {
  0% {
    width: 30px;
    height: 30px;
  }
  50% {
    width: calc(100% + 9px);
    height: calc(100% + 9px);
  }
  100% {
    width: 30px;
    height: 30px;
  }
}
.game-start {
  font-size: 23px;
  color: #ffffff;
  text-shadow: 0px 1px 0px skyblue, 0px 2px 0px skyblue, 0px 3px 0px skyblue,
    0px 4px 0px skyblue, 0px 5px 10px rgba(0, 0, 0, 0.9);
}
.game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.tips {
  width: 350px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  border-radius: 15px;
  position: absolute;
  right: 2vw;
  bottom: 3vh;
  color: black;
  background-image: linear-gradient(
    to right,
    rgb(89, 255, 0),
    rgb(0, 251, 255),
    rgb(0, 51, 255)
  );
  z-index: 100;
}

button {
  border: none;
  position: relative;
  width: 280px;
  height: 100px;
  padding: 0;
  z-index: 2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E")
    no-repeat 50% 50%;
  -webkit-mask-size: 100%;
  cursor: pointer;
  background-color: transparent;
  transform: translateY(8px);
}

button:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0 0 0 white;
  transition: all 2s ease;
}

button:hover:after {
  box-shadow: 0px -13px 56px 12px #ffffffa6;
}

button span {
  position: absolute;
  width: 100%;
  font-size: 15px;
  font-weight: 100;
  left: 50%;
  top: 39%;
  letter-spacing: 3px;
  text-align: center;
  transform: translate(-50%, -50%);
  color: black;
  transition: all 2s ease;
}

button:hover span {
  color: white;
}

button:before {
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  background-color: black;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s ease;
}

button:hover:before {
  width: 100%;
}

.drop-word {
  text-align: center;
  width: 25vw;
}
@media screen and(max-width: 1650px) {
  .fraction-container {
    width: 400px;
  }
  .enter-text {
    width: 33vw;
  }
  .tips {
    width: 350px;
  }
}
@media screen and(max-width: 1530px) {
  .fraction-container {
    width: 370px;
  }
  .enter-text {
    width: 30vw;
  }
  .tips {
    width: 320px;
  }
}
@media screen and(max-width: 1413px) {
  .fraction-container {
    width: 340px;
  }
  .enter-text {
    width: 30vw;
  }
  .tips {
    width: 290px;
    font-size: 15px;
  }
}
@media screen and(max-width: 1390px) {
  .fraction-container {
    width: 310px;
  }
  .enter-text {
    width: 30vw;
  }
  .tips {
    width: 260px;
  }
}

@media screen and(max-width: 1290px) {
  .fraction-container {
    width: 280px;
  }
  .enter-text {
    width: 30vw;
  }
  .tips {
    width: 230px;
  }
}

@media screen and(max-width: 1024px) {
  //   .fraction-container{
  //     width: 250px;
  //   }
  //   .enter-text{
  //     width: 30vw;
  //   }
  //   .tips{
  //     width: 200px;
  //   }
}
</style>
